Responsive Charts হলো এমন চার্ট যা বিভিন্ন ডিভাইসের স্ক্রীন সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করে। যেমন, মোবাইল, ট্যাবলেট, এবং ডেস্কটপে একই চার্ট ভিন্ন আকারে এবং উপস্থাপনায় প্রদর্শিত হয়। Google Charts API দিয়ে সহজেই রেসপন্সিভ চার্ট তৈরি করা সম্ভব। নিচে রেসপন্সিভ চার্ট তৈরি করার প্রক্রিয়া বর্ণনা করা হলো।

Responsive Chart তৈরি করার উপায়

রেসপন্সিভ চার্ট তৈরি করতে, আপনাকে সাধারণত CSS এবং JavaScript-এর সাহায্যে চার্টের আকার কাস্টমাইজ করতে হবে। Google Charts এ চার্টের আকার পরিবর্তন করার জন্য আমরা window resize ইভেন্ট ব্যবহার করি যাতে ব্রাউজারের আকার পরিবর্তন হলে চার্টের আকারও পরিবর্তিত হয়।

Step-by-Step: Responsive Google Chart তৈরি করা

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই একটি প্রজেক্ট থাকে তবে সেটি ব্যবহার করতে পারেন):

ng new responsive-charts
cd responsive-charts

Step 2: Google Charts লাইব্রেরি ইন্সটল করা

এখন, angular-google-charts লাইব্রেরি ইন্সটল করতে হবে। এটি Google Charts API ব্যবহার করার জন্য প্রয়োজনীয় লাইব্রেরি।

npm install angular-google-charts

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন GoogleChartsModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এর জন্য app.module.ts ফাইলে নিম্নলিখিত কোডটি যোগ করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট করুন

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Responsive Chart তৈরি করা

এখন, আমরা একটি Pie Chart তৈরি করব, যা রেসপন্সিভ হবে এবং স্ক্রীন সাইজ পরিবর্তন হলে স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করবে।

app.component.ts ফাইল:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Responsive Google Chart Example';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities', // Title
    pieHole: 0.4,  // Doughnut Style
    width: '100%', // Set width to 100% for responsiveness
    height: 400, // Fixed height
  };

  ngOnInit() {
    // Handle window resize for responsiveness
    window.addEventListener('resize', () => this.drawChart());
  }

  // Function to draw chart based on window size
  drawChart() {
    // Get the width of the container to dynamically adjust chart size
    const width = window.innerWidth * 0.9; // Set the chart width to 90% of the window width
    this.chartOptions.width = width;
  }
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

Step 5: CSS (Responsive Layout)

যেহেতু আমরা চার্টের আকারকে স্ক্রীনের আকার অনুযায়ী পরিবর্তন করতে চাচ্ছি, তাই কিছু CSS ব্যবহার করে রেসপন্সিভ লেআউট তৈরি করতে হবে।

app.component.css ফাইল:

google-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%; /* Make chart width responsive */
}

এখানে, আমরা max-width: 100% দিয়েছি যাতে চার্টটি স্ক্রীন সাইজ অনুযায়ী সঠিকভাবে আকার পরিবর্তন করতে পারে।

Step 6: অ্যাপ্লিকেশন চালানো

এখন Angular অ্যাপ্লিকেশনটি চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনি ব্রাউজারে গিয়ে রেসপন্সিভ Pie Chart দেখতে পারবেন এবং আপনার স্ক্রীন সাইজ পরিবর্তন করলে চার্টের আকারও পরিবর্তিত হবে।

রেসপন্সিভ চার্টের কাস্টমাইজেশন

• Width এবং Height কাস্টমাইজেশন: আপনি চাইলেই চার্টের width কে 100% সেট করতে পারেন, এবং height নির্ধারণ করতে পারেন। এটি চার্টের আকার স্ক্রীন সাইজের সাথে স্বয়ংক্রিয়ভাবে মানিয়ে যাবে।
• Responsive Layout: CSS ব্যবহার করে চার্টের আকার কাস্টমাইজ করা যায়, যেমন max-width ব্যবহার করে আপনি নিশ্চিত করতে পারেন যে চার্টটি স্ক্রীন অনুযায়ী পরিবর্তিত হয়।
• Dynamic Updates: window resize ইভেন্ট ব্যবহার করে আপনি চার্টের আকার পরিবর্তন করে তাকে ডাইনামিকভাবে রিফ্রেশ করতে পারেন।

সারাংশ

রেসপন্সিভ চার্ট তৈরি করতে Google Charts API-এ CSS এবং JavaScript ব্যবহার করে চার্টের আকার কাস্টমাইজ করা হয়। width এবং height কে 100% এবং auto সেট করার মাধ্যমে আপনি সহজেই চার্টকে রেসপন্সিভ বানাতে পারেন, যাতে এটি মোবাইল, ট্যাবলেট, এবং ডেস্কটপ স্ক্রীনে সঠিকভাবে প্রদর্শিত হয়। window resize ইভেন্ট ব্যবহার করে আপনি ব্রাউজারের আকার পরিবর্তন হলে চার্টের আকার ডাইনামিকভাবে আপডেট করতে পারবেন।

Google Charts API ব্যবহার করে আপনি সহজেই Responsive Layout তৈরি করতে পারেন, যাতে চার্টটি বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হয়। এর মাধ্যমে আপনি নিশ্চিত করতে পারবেন যে চার্টটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে রেন্ডার হবে।

Angular অ্যাপ্লিকেশনে Responsive Google Chart তৈরি করার জন্য, আপনি CSS ব্যবহার করতে পারেন এবং চার্টের আকারটি ডাইনামিকভাবে পরিবর্তন করার জন্য কিছু কাস্টমাইজেশন করতে পারেন।

Responsive Layout তৈরি করার পদক্ষেপ

Step 1: Angular প্রজেক্ট এবং লাইব্রেরি ইন্সটল করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন অথবা আপনার প্রজেক্টে angular-google-charts লাইব্রেরি ইন্সটল করুন।

ng new responsive-charts
cd responsive-charts
npm install angular-google-charts

Step 2: GoogleChartsModule ইমপোর্ট করা

এখন, app.module.ts ফাইলে GoogleChartsModule ইমপোর্ট করুন।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, GoogleChartsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Responsive Layout তৈরি করা

এখন, Responsive Layout তৈরি করার জন্য আমরা CSS এর মাধ্যমে chart container এর সাইজ নিয়ন্ত্রণ করব এবং ব্রাউজারের সাইজ পরিবর্তন হলে চার্টটি স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করবে।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Responsive Google Chart Example';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4, // Doughnut Style
    width: '100%',  // Width as percentage (responsive)
    height: 400     // Fixed height
  };
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Responsive Google Chart -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে, আমরা width: '100%' ব্যবহার করেছি, যাতে চার্টটি তার প্যারেন্ট কন্টেইনারের প্রস্থ অনুযায়ী সাইজ নেয় এবং ব্রাউজার উইন্ডো সাইজ পরিবর্তন করলে এটি রিসাইজ হয়। height এর মান 400 পিক্সেল নির্ধারণ করা হয়েছে, যা আপনি প্রয়োজন অনুযায়ী পরিবর্তন করতে পারেন।

Step 4: CSS এর মাধ্যমে Responsive Layout নিশ্চিত করা

আমরা CSS ব্যবহার করে কন্টেইনারের সাইজ আরও কাস্টমাইজ করতে পারি। নিচে একটি উদাহরণ দেওয়া হলো যেখানে আমরা চার্টের কন্টেইনারকে আরও ফ্লেক্সিবল এবং রেসপনসিভ করেছি।

app.component.css ফাইল:

/* Flexbox ব্যবহার করে chart container কে responsive করা */
div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  /* Full screen height */
  width: 100%;    /* Full screen width */
}

google-chart {
  width: 100%;
  max-width: 800px;  /* Max width of the chart */
  height: 400px;     /* Fixed height */
}

এখানে, আমরা Flexbox ব্যবহার করে chart কন্টেইনারকে সেন্টার করেছি এবং width 100% রেখেছি, যাতে এটি স্বয়ংক্রিয়ভাবে তার প্যারেন্ট কন্টেইনারের আকার গ্রহণ করে। max-width: 800px দিয়ে চার্টের সর্বোচ্চ প্রস্থ নির্ধারণ করা হয়েছে, যাতে বড় স্ক্রীনে চার্টটি অত্যধিক বড় না হয়।

Step 5: ব্রাউজারে প্রজেক্ট চালানো

এখন, Angular অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি Responsive Pie Chart দেখতে পারবেন। উইন্ডো সাইজ পরিবর্তন করলে, চার্টটি স্বয়ংক্রিয়ভাবে সাইজ পরিবর্তন করবে।

Responsive Chart আরও কাস্টমাইজেশন

1. Media Queries ব্যবহার করা:

   আপনি CSS Media Queries ব্যবহার করে চার্টের সাইজ এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:

   @media (max-width: 600px) {
     google-chart {
       height: 300px;  /* Mobile devices will have a smaller height */
     }
   }
   

2. Width এবং Height Percentage:

   width: '100%' এবং height: 'auto' ব্যবহার করলে আপনি আপনার চার্টকে আরও ফ্লেক্সিবল করতে পারেন। এটি চার্টের প্রস্থ কন্টেইনারের আকার অনুযায়ী নিয়ন্ত্রণ করে।

   chartOptions = {
     title: 'My Responsive Chart',
     width: '100%',  // Responsive width
     height: 'auto'  // Auto-adjustable height
   };
   

সারাংশ

Google Charts-এ Responsive Layout তৈরি করতে, আপনি চার্টের width এবং height কাস্টমাইজ করতে পারেন, CSS এর মাধ্যমে প্যারেন্ট কন্টেইনার এবং চার্টকে ফ্লেক্সিবল করতে পারেন, এবং Media Queries ব্যবহার করে বিভিন্ন ডিভাইসের জন্য বিশেষ কাস্টমাইজেশন করতে পারেন। এই কৌশলগুলি ব্যবহার করে আপনি মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে চার্ট প্রদর্শন নিশ্চিত করতে পারেন। Angular এর মধ্যে Google Charts ব্যবহার করে রেসপনসিভ এবং ইন্টারঅ্যাকটিভ ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারবেন।

Window Resize Event হল একটি ইভেন্ট যা ব্যবহারকারী যখন তাদের ব্রাউজারের উইন্ডোর আকার পরিবর্তন করেন, তখন ট্রিগার হয়। এই ইভেন্টের মাধ্যমে আপনি চার্ট, ইমেজ বা অন্য কোনো কন্টেন্টের আকার ডাইনামিকভাবে পরিবর্তন করতে পারেন, যাতে তারা বিভিন্ন ডিভাইস বা স্ক্রীন সাইজের জন্য সঠিকভাবে উপস্থাপিত হয়।

Google Charts API এবং Angular ব্যবহার করে আপনি window resize ইভেন্ট হ্যান্ডেল করতে পারেন এবং সেই অনুযায়ী চার্টের আকার পরিবর্তন করতে পারেন।

এখানে window resize ইভেন্টের মাধ্যমে চার্টের আকার কিভাবে আপডেট করতে হয় তার একটি উদাহরণ দেখানো হলো।

Step-by-Step: Window Resize Event Handling

Step 1: Angular App তৈরি করা

প্রথমে একটি নতুন Angular অ্যাপ তৈরি করুন:

ng new resize-event-chart
cd resize-event-chart

Step 2: Google Charts লাইব্রেরি ইন্সটল করা

এখন angular-google-charts প্যাকেজটি ইন্সটল করতে হবে:

npm install angular-google-charts

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন GoogleChartsModule ইমপোর্ট করতে হবে app.module.ts ফাইলে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট করুন

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Chart এবং Resize Event Handling

এখন, আমরা একটি Pie Chart তৈরি করব এবং window resize ইভেন্ট হ্যান্ডেল করার মাধ্যমে চার্টের আকার পরিবর্তন করব।

app.component.ts ফাইল:

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Window Resize Event Handling';

  chartType = 'PieChart';  // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities', // Title
    pieHole: 0.4,  // Doughnut Style
    width: '100%', // Set width to 100% for responsiveness
    height: 400, // Fixed height
  };

  constructor() {}

  ngOnInit(): void {
    // Add window resize event listener when component is initialized
    window.addEventListener('resize', this.onResize.bind(this));
  }

  ngOnDestroy(): void {
    // Remove the event listener when the component is destroyed to avoid memory leaks
    window.removeEventListener('resize', this.onResize.bind(this));
  }

  // Function to handle window resize event
  onResize(): void {
    // Adjust chart width dynamically based on window size
    const width = window.innerWidth * 0.9; // Set chart width to 90% of the window width
    this.chartOptions.width = width;
  }
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

Step 5: Responsive Layout (CSS)

চার্টের রেসপন্সিভ আকারের জন্য কিছু CSS প্রয়োগ করা যেতে পারে, যেমন চার্টটি স্ক্রীন সাইজ অনুযায়ী সঠিকভাবে প্রদর্শিত হবে।

app.component.css ফাইল:

google-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%; /* Make chart width responsive */
}

এটি নিশ্চিত করে যে চার্টটি সর্বদা স্ক্রীনের 100% প্রস্থ ব্যবহার করবে এবং ব্রাউজার সাইজ পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে সমন্বয় হবে।

ব্যাখ্যা:

• window.addEventListener('resize', this.onResize.bind(this)):
  • যখন ব্রাউজারের আকার পরিবর্তিত হবে, তখন resize ইভেন্ট ট্রিগার হবে এবং onResize ফাংশন কল হবে। এতে আমরা চার্টের প্রস্থ পুনরায় সেট করি, যাতে এটি স্ক্রীনের আকারের সাথে মানিয়ে নেয়।
• this.onResize.bind(this):
  • bind(this) ব্যবহার করা হয়েছে যাতে this এর প্রসঙ্গ সঠিকভাবে ব্যাবহৃত হয়, কারণ ইভেন্ট হ্যান্ডলার ফাংশন অন্য প্রসঙ্গে কল হতে পারে।
• onResize():
  • এটি একটি ফাংশন যা উইন্ডো রিসাইজ ইভেন্টে কল হয় এবং এতে চার্টের width প্রোপার্টি পুনরায় সেট করা হয়।
• ngOnInit() এবং ngOnDestroy():
  • ngOnInit()-এ আমরা resize ইভেন্ট হ্যান্ডলার যোগ করি, এবং ngOnDestroy()-এ সেই হ্যান্ডলার সরিয়ে ফেলি যাতে মেমরি লিক না হয় যখন কম্পোনেন্ট ধ্বংস হয়।

Step 6: অ্যাপ্লিকেশন চালানো

এখন Angular অ্যাপ্লিকেশনটি চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনি ব্রাউজারে গিয়ে রেসপন্সিভ Pie Chart দেখতে পারবেন এবং ব্রাউজার উইন্ডোর আকার পরিবর্তন করলে চার্টের আকার স্বয়ংক্রিয়ভাবে আপডেট হবে।

সারাংশ

Window Resize Event Handling এর মাধ্যমে আপনি Google Charts API তে window resize ইভেন্ট ট্রিগার করে চার্টের আকার কাস্টমাইজ করতে পারেন। Angular তে এটি খুবই সহজ, যেখানে আপনি window.addEventListener ব্যবহার করে রিসাইজ ইভেন্ট শোনেন এবং সেই অনুযায়ী চার্টের আকার পরিবর্তন করেন। এটি responsive charts তৈরির জন্য খুবই কার্যকরী, যেহেতু চার্টটি স্ক্রীন সাইজের সাথে মানিয়ে নেয়।

Google Charts API-তে width এবং height সেটিংস দিয়ে চার্টের আকার কাস্টমাইজ করা হয়। আপনি চাইলে width এবং height ডায়নামিকভাবে পরিবর্তন করতে পারেন, অর্থাৎ চার্টের আকার ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে পরিবর্তন করতে পারবেন।

এখানে আমরা দেখব কিভাবে Angular এর মাধ্যমে Google Chart-এর width এবং height ডায়নামিকভাবে সেট করা যায়।

Steps for Dynamic Width and Height

1. Responsive Design (ব্রাউজারের আকার অনুসারে চার্টের আকার পরিবর্তন)

চার্টের width এবং height ডায়নামিকভাবে ব্রাউজারের আকার অনুসারে পরিবর্তন করতে, আপনি CSS ব্যবহার করতে পারেন এবং Angular কম্পোনেন্টে সেই সাইজ প্রোগ্রামেটিকভাবে আপডেট করতে পারেন।

2. Window Resize Event Handling

আপনি window resize ইভেন্টের মাধ্যমে চার্টের আকার পরিবর্তন করতে পারেন।

Example: Dynamic Width and Height

এখানে আমরা একটি Pie Chart তৈরি করব এবং width এবং height ডায়নামিকভাবে ব্রাউজারের সাইজ অনুসারে পরিবর্তন করব।

1. app.component.ts (কম্পোনেন্ট ফাইল):

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Dynamic Google Chart Example';
  chartType = 'PieChart'; // Chart Type

  // Chart Data
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];

  // Chart Options
  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    legend: { position: 'top', alignment: 'center' },
    tooltip: {
      trigger: 'focus',
      isHtml: true
    }
  };

  // Dynamic width and height
  chartWidth: number;
  chartHeight: number;

  constructor() {
    this.chartWidth = window.innerWidth * 0.7; // 70% of the window width
    this.chartHeight = window.innerHeight * 0.5; // 50% of the window height
  }

  // Handle window resize
  onResize(event: any) {
    this.chartWidth = event.target.innerWidth * 0.7; // 70% of new window width
    this.chartHeight = event.target.innerHeight * 0.5; // 50% of new window height
  }

  ngOnInit() {
    // Listen to window resize events
    window.addEventListener('resize', this.onResize.bind(this));
  }

  ngOnDestroy() {
    // Cleanup event listener when component is destroyed
    window.removeEventListener('resize', this.onResize.bind(this));
  }
}

2. app.component.html (HTML ফাইল):

<h1>{{ title }}</h1>

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions"
  [width]="chartWidth"
  [height]="chartHeight">
</google-chart>

Explanation

1. Initial Width and Height:
   chartWidth এবং chartHeight এর মান প্রাথমিকভাবে window.innerWidth এবং window.innerHeight ব্যবহার করে সেট করা হয়েছে। এর মানে, ব্রাউজারের উইন্ডোর সাইজ অনুযায়ী চার্টের আকার নির্ধারণ হবে। উদাহরণস্বরূপ, উইন্ডো সাইজের ৭০% প্রস্থ এবং ৫০% উচ্চতা ব্যবহার করা হচ্ছে।
2. Window Resize Event:
   window.addEventListener('resize', this.onResize.bind(this)) ব্যবহার করে আমরা resize ইভেন্ট লিসেনার যোগ করেছি। এটি যখন ব্রাউজারের সাইজ পরিবর্তিত হয় তখন onResize() ফাংশনটি কল করবে এবং chartWidth এবং chartHeight আপডেট হবে।
3. Dynamic Binding:
   <google-chart> কম্পোনেন্টের [width] এবং [height] প্রোপার্টি ডায়নামিকভাবে chartWidth এবং chartHeight থেকে বাইন্ড করা হয়েছে।
4. Clean Up:
   ngOnDestroy() লাইফ সাইকেল হুকের মাধ্যমে আমরা ইভেন্ট লিসেনারটি ক্লিনআপ করছি যাতে, কম্পোনেন্ট ধ্বংস হলে অতিরিক্ত ইভেন্ট লিসেনার না থাকে।

Responsive Design

Google Charts এর সঙ্গে রেসপন্সিভ ডিজাইন নিশ্চিত করতে আপনি CSS ব্যবহার করে সঠিক আকার পাবেন। উদাহরণস্বরূপ, ব্রাউজারের আকার অনুযায়ী চার্টের আকার এবং লেআউটকে কাস্টমাইজ করতে নিচের CSS ব্যবহার করা যেতে পারে:

app.component.css (CSS ফাইল):

google-chart {
  width: 100% !important;   /* Make the chart responsive */
  max-width: 800px;         /* Max width */
  height: 500px !important; /* Height of the chart */
}

এই CSS কোডটি চার্টকে 100% প্রস্থ এবং 500px উচ্চতা দিতে সাহায্য করবে, তবে চার্টের সাইজ ব্রাউজারের আকার অনুযায়ী পরিবর্তিত হবে।

সারাংশ

Google Charts এর width এবং height ডায়নামিকভাবে কাস্টমাইজ করার জন্য আপনি Angular-এ window resize ইভেন্ট ব্যবহার করতে পারেন। এভাবে, ব্রাউজারের সাইজ পরিবর্তিত হলে স্বয়ংক্রিয়ভাবে চার্টের আকারও পরিবর্তিত হবে। CSS ব্যবহার করে আরও রেসপন্সিভ ডিজাইন তৈরি করতে পারেন, যা আপনার চার্টকে বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শন করবে।

Responsive Design একটি ওয়েব ডিজাইন কৌশল যা ওয়েবপেজের কন্টেন্ট এবং লেআউটকে স্বয়ংক্রিয়ভাবে ডিভাইসের স্ক্রীন সাইজের সাথে সামঞ্জস্যপূর্ণ করে তোলে। এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপের মতো বিভিন্ন ধরনের ডিভাইসে ওয়েবসাইটের পারফরম্যান্স এবং ইউজার অভিজ্ঞতা উন্নত করতে সহায়তা করে। Google Charts ব্যবহার করে চার্টের রেসপন্সিভ ডিজাইন কাস্টমাইজ করার জন্য কিছু পদ্ধতি এবং টেকনিক্স তুলে ধরা হলো।

1. Viewport Meta Tag (ViewPort সেট করা)

Responsive Design-এর প্রথম ধাপ হলো Viewport সঠিকভাবে সেট করা, যাতে ওয়েব পেজটি ডিভাইসের স্ক্রীন সাইজের সাথে ফিট হয়ে যায়। এই ট্যাগটি ওয়েবপেজের <head> ট্যাগে যোগ করতে হয়।

<meta name="viewport" content="width=device-width, initial-scale=1.0">

এটি আপনার ওয়েবপেজকে মোবাইল-ফ্রেন্ডলি করে তোলে, কারণ এটি ব্রাউজারকে জানায় যে স্ক্রীন সাইজের উপর ভিত্তি করে কন্টেন্টটি স্কেল বা রিসাইজ হতে হবে।

2. CSS Media Queries (CSS Media Query ব্যবহার)

Media Queries হল CSS এর একটি ফিচার, যার সাহায্যে আপনি বিভিন্ন স্ক্রীন সাইজের জন্য আলাদা স্টাইল অ্যাপ্লাই করতে পারেন। এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য পৃথক স্টাইল তৈরি করতে সহায়তা করে।

Media Query উদাহরণ:

/* Default style for larger screens */
.chart-container {
  width: 80%;
  height: 500px;
}

/* For tablets (max-width: 768px) */
@media screen and (max-width: 768px) {
  .chart-container {
    width: 90%;
    height: 400px;
  }
}

/* For mobile devices (max-width: 480px) */
@media screen and (max-width: 480px) {
  .chart-container {
    width: 100%;
    height: 300px;
  }
}

এখানে, আপনি max-width ব্যবহার করে মোবাইল এবং ট্যাবলেটের জন্য আলাদা স্টাইল সেট করেছেন। width এবং height রেসপন্সিভভাবে মোবাইল এবং ট্যাবলেটের স্ক্রীন সাইজের সাথে সামঞ্জস্যপূর্ণ।

3. Google Chart এর জন্য Responsive Design

Google Charts-এ responsive ডিজাইন তৈরি করতে, আপনি চার্টের পাত্র বা কন্টেইনারের আকার CSS এর মাধ্যমে কাস্টমাইজ করতে পারেন। এর ফলে চার্টের আকার ডিভাইসের স্ক্রীন সাইজ অনুযায়ী পরিবর্তিত হবে।

Responsive Chart Container Example:

<div id="chart_div" style="width: 100%; height: 100%;"></div>

এখানে, width এবং height কে 100% দিয়ে সেট করা হয়েছে, যা চার্টের কন্টেইনারকে ওয়েবপেজের চাহিদা অনুযায়ী সাইজ পরিবর্তন করতে সক্ষম করবে।

Responsive Google Chart Example:

google.charts.load('current', {'packages':['corechart', 'pie']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]);

  var options = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    width: '100%',  // Set width to 100%
    height: '100%'  // Set height to 100%
  };

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

এখানে, width এবং height এর মান '100%' সেট করা হয়েছে, যাতে চার্টের আকার ডিভাইসের স্ক্রীন সাইজ অনুযায়ী পরিবর্তিত হয়।

4. Avoid Fixed Widths (স্থির প্রস্থ পরিহার করা)

চেষ্টা করুন সব চার্ট এবং কন্টেইনারের জন্য স্থির প্রস্থ (fixed width) ব্যবহার না করার জন্য। বরং, percentage-based width ব্যবহার করা উচিত, যাতে ওয়েবপেজটি সমস্ত স্ক্রীনে রেসপন্সিভ থাকে।

ব্যাভারিক উদাহরণ:

.chart-container {
  width: 100%;
  max-width: 800px;  /* Optional: Limit the width */
  height: 400px;
  margin: 0 auto;    /* Center the chart container */
}

এখানে, width: 100% ব্যবহার করা হয়েছে যাতে এটি স্ক্রীনের আকার অনুযায়ী সাইজ নেবে, এবং max-width দিয়ে চার্টটির একটি সর্বাধিক প্রস্থ সীমাবদ্ধ করা হয়েছে।

5. Maintaining Aspect Ratio (আসপেক্ট রেশিও বজায় রাখা)

Responsive ডিজাইন তৈরি করার সময় চার্টের আসপেক্ট রেশিও বজায় রাখা খুবই গুরুত্বপূর্ণ। চার্টের আসপেক্ট রেশিও পরিবর্তন না করার জন্য আপনি padding-bottom ব্যবহার করতে পারেন।

Aspect Ratio Example:

.chart-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio (height/width * 100) */
  position: relative;
}

#chart_div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

এখানে, padding-bottom: 56.25% দিয়ে 16:9 আসপেক্ট রেশিও বজায় রাখা হয়েছে, যা চার্টকে বিভিন্ন স্ক্রীনে সঠিকভাবে প্রদর্শন করবে।

6. Chart Redrawing on Resize (স্ক্রীন রিসাইজে চার্ট রিড্রয়িং)

যখন স্ক্রীন সাইজ পরিবর্তিত হয়, তখন আপনি resize ইভেন্ট ব্যবহার করে চার্টটি আবার রিড্রয় করা নিশ্চিত করতে পারেন। এটি আপনাকে চার্টের আকার পরিবর্তন করতে সহায়তা করবে।

google.charts.load('current', {'packages':['corechart', 'pie']});
google.charts.setOnLoadCallback(drawChart);

window.onresize = function () {
  drawChart(); // Redraw chart on resize
};

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]);

  var options = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    width: '100%',  // Set width to 100%
    height: '100%'  // Set height to 100%
  };

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

এখানে, window.onresize ব্যবহার করে স্ক্রীন রিসাইজের সময় drawChart() ফাংশনটি আবার কল করা হচ্ছে, যাতে চার্টটি নতুন স্ক্রীন সাইজ অনুযায়ী রিড্রয় হয়।

7. CSS Grid এবং Flexbox ব্যবহার

আপনি CSS Grid বা Flexbox ব্যবহার করে আপনার চার্টকে আরও ভালোভাবে রেসপন্সিভ ডিজাইনে সাজাতে পারেন। এগুলি বিভিন্ন উপাদানকে সারিবদ্ধ এবং সঠিকভাবে সাজাতে সহায়তা করে।

CSS Grid Example:

.chart-container {
  display: grid;
  place-items: center;
  width: 100%;
  height: 400px;
}

#chart_div {
  width: 80%;
  height: 100%;
}

Flexbox Example:

.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
}

#chart_div {
  width: 80%;
  height: 100%;
}

সারাংশ

Responsive Design Techniques ব্যবহার করে আপনি মোবাইল, ট্যাবলেট এবং ডেস্কটপে Google Charts এর প্রর্দশন কাস্টমাইজ করতে পারেন। Viewport Meta Tag, CSS Media Queries, Flexbox, Grid, এবং JavaScript Resize Events-এর মাধ্যমে আপনার চার্ট এবং কন্টেইনারের আকার স্বয়ংক্রিয়ভাবে স্ক্রীনের আকার অনুযায়ী সঠিকভাবে কাস্টমাইজ করা সম্ভব। এই কৌশলগুলি আপনার চার্টের ভিজুয়াল প্রেজেন্টেশন এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সহায়তা করবে।